<!-- src/components/ConfigManager.vue -->
<template>
  <div class="config-manager">
    <el-button type="primary" @click="showDialog = true" class="add-btn">
      添加新配置
    </el-button>

    <el-table :data="configs" style="width: 100%">
      <el-table-column prop="clientName" label="客户端名称" />
      <el-table-column prop="provider" label="提供商" />
      <el-table-column prop="clientId" label="Client ID" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editConfig(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteConfig(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="showDialog" :title="editingConfig.id ? '编辑配置' : '添加配置'">
      <el-form :model="editingConfig" label-width="120px">
        <el-form-item label="配置ID">
          <el-input v-model="editingConfig.id" placeholder="配置唯一标识" />
        </el-form-item>
        <el-form-item label="客户端名称">
          <el-input v-model="editingConfig.clientName" />
        </el-form-item>
        <el-form-item label="提供商">
          <el-input v-model="editingConfig.provider" />
        </el-form-item>
        <el-form-item label="Client ID">
          <el-input v-model="editingConfig.clientId" />
        </el-form-item>
        <el-form-item label="Client Secret">
          <el-input v-model="editingConfig.clientSecret" type="password" />
        </el-form-item>
        <el-form-item label="授权类型">
          <el-input v-model="editingConfig.authorizationGrantTypes" />
        </el-form-item>
        <el-form-item label="作用域">
          <el-input v-model="editingConfig.scopes" />
        </el-form-item>
        <el-form-item label="重定向URI">
          <el-input v-model="editingConfig.redirectUri" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="saveConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getClientConfigs, saveClientConfig, deleteClientConfig } from '@/services/api';

const configs = ref([]);
const showDialog = ref(false);
const editingConfig = ref({
  id: '',
  clientName: '',
  provider: '',
  clientId: '',
  clientSecret: '',
  authorizationGrantTypes: 'authorization_code',
  scopes: '',
  redirectUri: ''
});

onMounted(async () => {
  await fetchConfigs();
});

const fetchConfigs = async () => {
  try {
    const response = await getClientConfigs();
    configs.value = response.data;
  } catch (error) {
    console.error('获取配置失败', error);
  }
};

const editConfig = (config) => {
  editingConfig.value = { ...config };
  showDialog.value = true;
};

const saveConfig = async () => {
  try {
    await saveClientConfig(editingConfig.value);
    showDialog.value = false;
    await fetchConfigs();
  } catch (error) {
    console.error('保存配置失败', error);
  }
};

const deleteConfig = async (id) => {
  try {
    await deleteClientConfig(id);
    await fetchConfigs();
  } catch (error) {
    console.error('删除配置失败', error);
  }
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 20px;
}
</style>